
<template>

  <el-container>
    <el-header>
        <span style="color: darkred">银行交易安全防控系统
          <el-dropdown @command="handleCommand">
  	     <span class="el-dropdown-link;" style="margin-left: 1150px">
  	       {{this.$route.params.name}}<i class="el-icon-arrow-down el-icon--left"></i>
  	     </span>
  	     <el-dropdown-menu slot="dropdown">
  	       <el-dropdown-item command="a">个人信息</el-dropdown-item>
  	       <el-dropdown-item command="b">修改密码</el-dropdown-item>
  	       <el-dropdown-item command="c">退出系统</el-dropdown-item>
  	     </el-dropdown-menu>
  	   </el-dropdown>
        </span>
    </el-header>
    <el-container>
      <el-aside width="200px" style="width: auto">

        <div>
          <div style="width:auto;height: 100%;float: left">
            <leftMenu></leftMenu>
          </div>
          <!-- 主数据展示区域 -->

        </div>
      </el-aside>
      <el-main>
        <div style="width: auto;height: 100%;float: left;margin-left: 5px">
          <router-view style="width: 100%;height: 100%"></router-view>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
    import leftMenu from '@/view/menu/left-menu'

    export default {
        components: {leftMenu},
        comments:{
            leftMenu
        },
        name:"home",
        data() {
            return {
                isCollapse: true
            };
        },
        methods: {
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            dianji(){
                this.isCollapse=false;

            },
            handleCommand(command) {
                if(command=='a'){
                    this.$message('click on item 个人信息');
                    this.detailUserDialog=true;
                }else if(command=='b'){
                    this.$message('click on item 修改密码');
                    this.PasswordDialog=true;
                    this.Ypassword=this.$store.state.user.password;
                    this.ruleForm.id=this.$store.state.user.id;
                }else if(command=='c'){
                    this.$confirm('你是否要退出此系统尼?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        //数据还原
                        this.$store.commit('login', {});
                        //退出到登录界面
                        this.$router.replace({
                            path: '/'
                        });
                        this.$message({
                            type: 'success',
                            message: '退出成功!'
                        });

                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '取消退出'
                        });
                    });
                }
            }
        }
    }
</script>

<style>
  .el-header {
    background-color: #D3DCE6;
    color: #FFFFFF;
    line-height: 60px;
    text-align: left;
  }



</style>





